<template>
  <view class="my-vehicles">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/back.png" @click="goBack"></image>
      <text class="nav-title">我的车辆</text>
    </view>

    <!-- 主内容区域（占位内容居中） -->
    <view class="content-wrapper">
      <image class="vehicle-img" src="@/img/车联网服务-08我的-05我的车辆添加_slices/组 4@2x.png"></image>
      <text class="empty-tip">暂无车辆信息</text>
    </view>

    <!-- 添加车辆按钮（固定在底部） -->
    <view class="btn-container">
      <button class="add-vehicle-btn">+ 添加车辆</button>
    </view>/
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 静态数据
    };
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.my-vehicles {
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative; /* 为底部按钮按钮定位 */
  padding-top: 44px; /* 预留导航栏高度 */
  box-sizing: border-box;
}

/* 导航栏样式 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #007aff;
  padding: 0 15px;
  z-index: 1;
}
.back-icon {
  width: 20px;
  height: 20px;
}
.nav-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto;
}

/* 中间内容区域（垂直居中） */
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 144px); /* 减去导航栏和按钮高度 */
  z-index: 2;
}
.vehicle-img {
  width: 160px;
  height: 120px;
  margin-bottom: 20px;
}
.empty-tip {
  font-size: 16px;
  color: #999;
}

/* 底部按钮容器 */
.btn-container {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 添加车辆按钮样式 */
.add-vehicle-btn {
  width: 100%;
  max-width: 300px;
  background-color: #007aff;
  color: #fff;
  border-radius: 25px; /* 圆角按钮 */
  font-size: 16px;
  padding: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); /* 轻微阴影 */
}
</style>
    